<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                    + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title>添加公告信息</title>
    <link href="static/easyui/themes/default/easyui.css" rel="stylesheet"/>
    <link href="static/easyui/themes/icon.css" rel="stylesheet"/>
    <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table>
    <tr>
        <td>标题：</td>
        <td>
            <input class="easyui-textbox" type="text" name="title" id="title"/>
        </td>
    </tr>
    <tr>
        <td>内容：</td>
        <td>
            <input class="easyui-textbox" type="text" name="type" id="content"
                   data-options="multiline:true" style="width:300px;height:200px"/>
        </td>
    </tr>
    <tr>
        <td>上传照片：</td>
        <td><input class="easyui-filebox" id="file" name="file" data-options="buttonText:'选择文件'"
                   style="width:300px">
            <br/>
            <label id="fileName"></label>
        </td>
    </tr>
    <tr>
        <td><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"
               onclick="submit()">提交</a></td>
        <td><a href="javascript:void(0)" class="easyui-linkbutton"
               data-options="iconCls:'icon-reload'" onclick="reset()">重置</a></td>
    </tr>
</table>
<script>
  $(function() {
    // 用户上传图片事件
    $('#file').filebox({'onChange': function(e) {
        // 获取到文件对象
        var file0 = $("#file").filebox("files")[0];
        var formData = new FormData();
        formData.append("file", file0);
        // 将文件直接上传到后台
        $.ajax({
          type: "post",
          url: "fileUpload",
          data: formData,
          processData: false,
          contentType: false,
          success: function(response) {
            // 将文件框的内容设置成为文件名
            $('#fileName').text(response.data);
          }
        })
      }})
  })
  // 提交表单
  function submit() {
    var title = $('#title').val();
    var content = $('#content').val();
    var fileName = $('#fileName').text();

    // 提交到后台
    $.ajax({
      url: "notice/add.do",
      type: "post",
      data: {
        "title": title,
        "content": content,
        "fileName": fileName
      },
      success: function (response) {
        var message = response.message;
        if (response.code == 0) {
          message += ",请关闭后刷新";
        }
        $.messager.show({
          title: '提示',
          msg: message,
          showType: 'show',
          timeout: 1500,
          style: {
            right: '',
            top: document.body.scrollTop + document.documentElement.scrollTop,
            bottom: ''
          }
        });

      }
    });
  }

  // 重置表单
  function reset() {

  }

</script>
</body>
</html>
